import Taro, { Component } from '@tarojs/taro'
import { ScrollView } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import TopicItem from './topicItem'
import {getTopicListAction, getTopicNextListAction} from '../../actions/topicListAction'

import './index.scss'

@connect((store) => {
  return {
    ...store.topicListReducer, 
    currentListItem: store.menuReducer.currentListItem
  }
}, (dispatch) => ({
  onTopicList(params){
    dispatch(getTopicListAction(params))
  },
  onTopicNextList(params){
    dispatch(getTopicNextListAction(params))
  }
}))
class TopicList extends Component{
  componentDidMount(){
    let {page, limit, currentListItem} = this.props
    this.props.onTopicList({page, limit, tab: currentListItem.key})
  }
  handleScrolltoLower(){
    // console.log(this.props)
    let {page, limit, currentListItem} = this.props
    this.props.onTopicNextList({page: (page + 1), limit, tab: currentListItem.key})
  }
  render(){
    let { currentTabList } = this.props
    return(
      <ScrollView style={{height: '650PX'}} onScrollToLower={this.handleScrolltoLower.bind(this)} scrollY>
        {
          currentTabList.map(item => {
            return <TopicItem key={item.id} item={item} />
          })
        }
      </ScrollView>
    )
  }
}

export default TopicList